JS动态添加div、li、img等元素及设置属性(实例) | 您所在的位置:网站首页 › js 动态插入html › JS动态添加div、li、img等元素及设置属性(实例) |
把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂。如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解。 网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如 div、li、img 这样的标签。其实,不管是什么 html 标签,js 动态创建的方法都差不多,接着就先从动态添加 div 开始。 一、js 动态添加元素div
function addElementDiv(obj) { var parent = document.getElementById(obj); //添加 div var div = document.createElement("div"); //设置 div 属性,如 id ;若是样式则设置方式为:div.setAttribute('class','你要添加的样式CLASS名'); div.setAttribute("id", "newDiv"); div.innerHTML = "js 动态添加div"; parent.appendChild(div); } 调用:addElementDiv("parent");
二、js 动态添加li 原li function addElementLi(obj) { var ul = document.getElementById(obj); //添加 li var li = document.createElement("li"); //设置 li 属性,如 id li.setAttribute("id", "newli"); li.innerHTML = "js 动态添加li"; ul.appendChild(li); } 调用:addElementLi("parentUl");
三、js 动态添加元素img
function addElementImg(obj) { var ul = document.getElementById(obj); //添加 li var li = document.createElement("li"); //添加 img var img = document.createElement("img"); //设置 img 属性,如 id img.setAttribute("id", "newImg"); //设置 img 图片地址 img.src = "/images/prod.jpg"; li.appendChild(img); ul.appendChild(li); } 调用:addElementImg("parentUl"); 转自:https://blog.csdn.net/qq_33428652/article/details/51583792 补充强化:li指定位置新增 var nodeli = document.createElement('li');//创建一个li节点 var nodeul = document.getElementsById("ul");//获取UL节点 var nodeli1 = nodeul.getElementsById('li');//获取已存在li节点 nodeul.insertBefore(nodeli,nodeli1);//函数insertBefore()表示在哪个节点前添加。第一个参数为要插入的新节点,第二个参数为已有节点 li 元素删除 //为删除按钮添加删除节点功能 function delBtnData(obj){ var ul=document.getElementById("J_List"); var oLi=obj.parentNode.parentNode; //obj.parentNode指删除按钮的span层 //obj.parentNode.parentNode为li层 ul.removeChild(oLi); } 知识点:innerHTML(需注意双引号”或\ 需用 / 转义)。 知识点:createElement创建元素,setAttribute设置元素属性,innerHTML设置元素值,appendChild添加元素,parentNode获取父节点(parentNode是W3C标准的,parentElement 只在IE中可用. ),removeChild删除子节点。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |